<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	String projectPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<c:set var="basePath" value="<%=projectPath%>"></c:set>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>首页[spring-websocket demo]</title>
	<style type="text/css">
		body {
			background: #E2E2E2;
			font-size: 13.5px;
		}

		div[message] {
			background: #5170ad;
			width: 400px;
			height: 600px;
			border: 1px solid #ccc;
			color: #fff;
			overflow-y: auto;
		}

		ul, li {
			list-style-type: square;
		}
	</style>
	<script type="text/javascript" src="${ctx}/static/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/plugins/sockjs/sockjs.min.js"></script>
	<script type="text/javascript">
		var PATH = "${ctx}";
		var websocket = null;
		if (window['WebSocket'])
		// ws://host:port/project/websocketpath
			websocket = new WebSocket("ws://" + window.location.host + PATH + '/websocket');
		else
			websocket = new new SockJS(PATH + '/websocket/socketjs');

		websocket.onopen = function (event) {
			console.log('open', event);
		};
		websocket.onmessage = function (event) {
			console.log('message', event.data);
			$('div[message] > ul').append('<li>' + event.data + '</li>');
		};

		// 断线重连
		websocket.onclose = function () {
			// 重试10次，每次之间间隔10秒
			if (tryTime < 10) {
				setTimeout(function () {
					webSocket = null;
					tryTime++;
					initSocket();
				}, 500);
			} else {
				tryTime = 0;
			}
		};
	</script>

</head>
<body>
<div message>
	<ul>
	</ul>
</div>
</body>
</html>
